<template>
    <div>
        <el-form ref="form" :model="form" label-width="150px" class="turnover_form">
            <el-row class="turnover_main" v-if="isShowTurn">
                <el-col :span="24">
                    <el-form-item label="累计成交额：">
                        <span>{{this.form.totalTradePrice}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="上一工作日成交额：">
                        <span>{{this.form.yesterdayOrderNumber}}笔 &#X3000;</span>
                        <span>{{this.form.yesterdayTradePrice}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="今日实时成交额：">
                        <span>{{this.form.todayOrderNumber}}笔 &#X3000;</span>
                        <span>{{this.form.todayTradePrice}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="turnover_btn submit-btn">
                    <el-button type="primary" size="small" @click="edit()">修改</el-button>
                </el-col>
            </el-row>
            <el-row class="turnover_main turnover_main2" v-if="!isShowTurn">
                <el-col :span="24">
                    <el-form-item label="累计成交额：">
                        <el-input class="bill_int" v-model="form.totalTradePrice" suffix-icon="iconfont icon-yuan"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="上一工作日成交额：">
                        <el-input class="bill_int" v-model="form.yesterdayOrderNumber"></el-input> &#X3000;
                        <el-input class="bill_int" v-model="form.yesterdayTradePrice" suffix-icon="iconfont icon-yuan"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="今日实时成交额：">
                        <el-input class="bill_int" v-model="form.todayOrderNumber"></el-input> &#X3000;
                        <el-input class="bill_int" v-model="form.todayTradePrice" suffix-icon="iconfont icon-yuan"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="turnover_btn submit-btn">
                    <el-button type="info" size="small" @click="close()">取消</el-button>
                    <el-button type="primary" size="small" @click="confirmsave()">保存</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';

    @Component({
        methods: {
        }
    })
    export default class Trunover extends Vue {
        isShowTurn: boolean = true;
        form = {
            totalTradePrice: '',
            todayOrderNumber: '',
            todayTradePrice: '',
            yesterdayOrderNumber: '',
            yesterdayTradePrice: ''
        }
        async getTurnoverData () {
            let res = await this.$http.get('orders/orderCount')
            if(res.status == 200){
                this.form.totalTradePrice = res.data.total_trade_price;
                this.form.todayOrderNumber = res.data.today_order_number;
                this.form.todayTradePrice = res.data.today_trade_price;
                this.form.yesterdayOrderNumber = res.data.yesterday_order_number;
                this.form.yesterdayTradePrice = res.data.yesterday_trade_price;
            }
        }
        confirmsave () {
            let saveForm = this.form;
            this.$http.put('orders/count',saveForm)
                .then((res) => {
                    if(res.status == 200){
                        this.$alert('保存成功','提示',{
                            confirmButtonText: '确定',
                            customClass: 'custom-message-box',
                            callback: action => {
                                this.isShowTurn = true;
                                this.getTurnoverData();
                            }
                        })
                    }
                })
        }
        edit () {
            this.isShowTurn = false;
        }
        close () {
            this.isShowTurn = true;
        }
        mounted () {
            this.getTurnoverData();
        }
    }
</script>

<style scoped lang="scss">
    .turnover_form {
        margin-top: 45px;
        display: flex;
        justify-content: center;
    }
    .turnover_main {
        width: 790px;
        .el-form-item__content {
            margin-left: 0;
        }
        .el-form-item {
            margin-bottom: 0px;
        }
    }
    .turnover_main2 {
        .el-form-item {
            margin-bottom: 20px;
        }
        .el-input {
            width: 322px;
        }
        /*margin-left: 12%;*/
    }
    .turnover_btn {
        padding-left: 150px;
    }
</style>
<style lang="scss">
    .turnover_main {
        .el-form-item__content {
            margin-left: 0 !important;
            display: flex;
            justify-content: flex-start;
        }
        .el-input__suffix {
            color: $__color-show;
            .el-input__icon {
                font-size: $__little-font-size;
            }
        }
    }
</style>